<template>
    <div class="all">

        <div class="smallbox">
            <Topic></Topic>
            <div class="box">
                <div class="wenzi">
                    
                        <Example></Example>
                        <Example></Example>

            </div>
            <div class="tupian scroll">
                <img src="https://19912676.s61i.faiusr.com/4/AD0I5K_-CRAEGAAghavx6AUo_KaVqwQw2AQ42AQ!500x500.png.webp" alt="">
                
            </div>
            <div  class="wenzi">
                <Example></Example>
                        <Example></Example>

            </div>
            </div>
        </div>

    </div>
  
</template>

<script>
    import Example from "./Example.vue"
    import Topic from "./topic.vue"

export default {
    components:{
    Example,
    Topic,
}

}
</script>

<style scoped>
    
    div{
        display: inline-block;
        width: 324px;
        
    }
    .all{
        width: 100%;
        text-align: center;
        padding: 0px 15px 0 15px;
    }
    .smallbox{
        display: inline-block;
        width: 1200px;
        
    }
    .smallbox .box{
        width: 1200px;
        overflow: hidden;
        /* visibility: hidden; */
        overflow: hidden;
    }
    .tupian{
        height: 100%;
        width: 492px;
        height: 492px;
        /* background-color: antiquewhite; */
        margin: 0px 30px;
    }
    .wenzi{
        height: 492px;
        /* background-color: aquamarine; */
        vertical-align: top;
    }
    img{
  width: 100%;
}



</style>